<template>
  <div class="supplyMain">
    <!-- 顶部 -->
    <div class="nav">
      <div class="title">发布供应</div>

      <div class="subheading">
        <div class="notice">
          【发布须知】：请正确选择供应信息分类有利于产品曝光，
          <span @click="noticeDialog = true">规则提示>></span>
        </div>

        <div class="connect">
          <div class="left">
            <div class="goConnect" v-show="this.showNotice">
              没有搜到发布的牌号？请联系客服
            </div>
          </div>
          <div class="ask">
            <img
              src="../../assets/bussiness/icon_fbgy_1@2x.png"
              class="image"
              alt=""
              @mouseover="showNoticeLog"
              v-if="!this.showNotice"
            />
            <img
              src="../../assets/bussiness/icon_fbgy_2@2x.png"
              class="image"
              v-else
              @mouseleave="hideNoticeLog"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 内容 -->
    <div class="content">
      <div class="top">
        <div class="title">请选择发布的供应分类</div>
        <div class="topSelect">
          <div class="selectGroup">
            <div
              class="selectItem1"
              v-for="(item, index) in kindList"
              :key="index"
              @click="selectKind(index)"
            >
              <img
                class="checkImage"
                src="../../assets/bussiness/btn_dl_sel@2x.png"
                alt=""
                v-if="currentIndex == index"
              />
              <div class="checkbox" v-else></div>
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>

      <!-- 搜索 -->
      <div class="search">
        <div
          class="SelectItem"
          v-for="(item1, index) in selectList"
          :key="index"
          v-show="index == 0 || !hideCompanySelect"
        >
          <input
            class="input"
            type="text"
            :key="currentIndex"
            :placeholder="item1.placeholder"
            @click="searchInfomation(item1, index)"
            @input="getSearchContent($event, index)"
          />
          <div class="dropDown">
            <div class="viewArea" v-if="item1.showArea" ref="viewArea">
              <div class="tip" ref="tip">{{ item1.tip }}</div>
              <ul class="selectList" ref="selectList" @scroll="scroll(index)">
                <li
                  v-for="(item2, selectIndex) in item1.list"
                  :key="selectIndex"
                  class="item"
                  @click="saveData(item1, item2, index)"
                >
                  {{ item2.name }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 已选分类 -->
      <div class="selected">
        <div class="left">
          <span>已选分类：</span>
          <div class="box">
            {{ this.typeValue }}
            <span v-if="this.brandValue !== ''">>></span>{{ this.brandValue }}
            <span v-if="this.companyValue !== ''">>></span
            >{{ this.companyValue }} <span v-if="this.markValue !== ''">>></span
            >{{ this.markValue }}
          </div>
        </div>
        <div class="right" @click="clearAll">清除</div>
      </div>

      <!-- 按钮 -->
      <div
        :class="['button', { isReadyClass: isRed == true }]"
        @click="nextPage"
      >
        下一步，填写产品信息
      </div>
    </div>

    <!-- 提示弹窗 -->
    <el-dialog
      title="规则提示"
      :visible.sync="noticeDialog"
      width="5.71rem"
      center
      class="notice_dialog"
    >
      <div class="matter" v-if="result" v-html="result"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "supplyMain",

  data() {
    return {
      noticeDialog: false,
      kindList: [
        { name: "塑胶原料" },
        { name: "改性塑料" },
        { name: "再生塑料" },
        { name: "塑料助剂" },
        { name: "塑料机械" },
      ],
      test: [],
      showNotice: false,
      show: false,
      selectList: [
        {
          placeholder: "品名搜索",
          tip: "请选择品名",
          list: [],
          option: [
            { name: "阻燃剂" },
            { name: "增韧剂" },
            { name: "抗氧剂" },
            { name: "增塑剂" },
            { name: "增白剂" },
            { name: "增强剂" },
            { name: "改性剂" },
            { name: "稳定剂" },
            { name: "母粒" },
            { name: "相容剂" },
            { name: "抗静电剂" },
            { name: "润滑剂" },
            { name: "开口剂" },
            { name: "脱模剂" },
            { name: "发泡剂" },
            { name: "清洗剂" },
            { name: "耐磨剂" },
            { name: "增溶剂" },
            { name: "干燥剂" },
            { name: "光亮剂" },
            { name: "消光剂" },
            { name: "分散剂" },

            { name: "着色剂" },
            { name: "荧光增白剂" },
            { name: "除水剂" },
            { name: "添加剂" },
            { name: "促进剂" },
            { name: "防粘连剂" },
            { name: "吸水剂" },
            { name: "填料" },
            { name: "钛白粉" },
            { name: "耐热剂" },
            { name: "聚合物改性剂" },

            { name: "PE蜡" },
            { name: "A蜡" },
            { name: "PP蜡" },
            { name: "PVC粉" },
            { name: "PVC稳定剂" },
            { name: "玻璃纤维" },
            { name: "其他助剂" },
          ],
          actions: [
            { name: "造粒机" },
            { name: "注塑机" },
            { name: "吹膜机" },
            { name: "吹瓶机" },
            { name: "破碎机" },
            { name: "分选机" },
            { name: "清洗机" },
            { name: "搅拌机" },
            { name: "打包机" },
            { name: "冷水机" },
            { name: "挤出机" },

            { name: "干燥机" },
            { name: "机械手" },
            { name: "中空成型机" },
            { name: "发泡机" },
            { name: "吸塑机" },
            { name: "切粒机" },
            { name: "分离机" },
            { name: "机械配件" },
            { name: "其他机械" },
          ],
          showArea: true,
        },
        {
          placeholder: "厂家搜索",
          tip: "请选择厂家",
          list: [],
          showArea: false,
        },
        {
          placeholder: "牌名搜索",
          tip: "请选择牌名",
          list: [],
          showArea: false,
        },
      ],
      pageNo: 1,
      // brandPageNo:1,
      companyPageNo: 1,
      markNo: 1,
      pageSize: 10,
      total: 0,
      companytotal: 0,
      marktotal: 0,
      timeout: null,
      brandSearch: "",
      companySearch: "",
      markSearch: "",
      typeValue: "",
      brandValue: "",
      brandId: "",
      companyValue: "",
      companyId: "",
      markValue: "",
      markId: "",
      hideCompanySelect: false,
      result: "",
      defaultAddress: {},
      currentIndex: 0,
      addressData: [],
      isRed: false,
    };
  },
  created() {
    this.ruleNotice();
    this.brandList();

    this.getAddressList();
    this.typeValue = this.kindList[this.currentIndex].name;
    this.selectList[0].showArea = true;
  },

  // mounted() {},
  methods: {
    // 规则提示
    async ruleNotice() {
      let params = {};
      let res = await this.$apiFun.ruleNotice(params);
      this.result = res.result.rulesAndPrompt;
    },

    // 品名列表
    async brandList(isBrand) {
      // console.log("isBrand", isBrand);
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      if (this.brandSearch) {
        params.condition = this.brandSearch;
      }
      let res = await this.$apiFun.brandList(params);
      this.total = res.result.total;
      if (isBrand) {
        this.selectList[0].list.push(...res.result.rows);
      } else {
        this.selectList[0].list = res.result.rows;
      }
    },

    // 厂家列表
    async companyList(isCompany) {
      // console.log(isCompany);
      let params = {
        pageNo: this.companyPageNo,
        pageSize: this.pageSize,
        brandId: this.brandId,
        productId: this.brandId,
      };
      if (this.companySearch) {
        params.condition = this.companySearch;
      }
      let res = await this.$apiFun.companyList(params);
      this.companytotal = res.result.total;
      if (isCompany) {
        this.selectList[1].list.push(...res.result.rows);
      } else {
        this.selectList[1].list = res.result.rows;
      }
    },

    // 牌号列表
    async markList(isMark) {
      let params = {
        pageNo: this.markNo,
        pageSize: this.pageSize,
        brandId: this.brandId,
        companyId: this.companyId,
        productId: this.brandId,
        manufacturersId: this.companyId,
      };
      if (this.markSearch) {
        params.condition = this.markSearch;
      }
      let res = await this.$apiFun.markList(params);
      this.marktotal = res.result.total;
      if (isMark) {
        this.selectList[2].list.push(...res.result.rows);
      } else {
        this.selectList[2].list = res.result.rows;
      }
    },

    // 列表滚动
    scroll(index) {
      // console.log(8888);
      // console.log("index", index);
      var clientHeight = this.$refs.selectList[index].clientHeight;
      var scrollHeight = this.$refs.selectList[index].scrollHeight;
      var scrollTop = this.$refs.selectList[index].scrollTop;

      if (clientHeight == scrollHeight - scrollTop) {
        if (
          index == 0 &&
          this.pageNo * this.pageSize < this.total &&
          (this.typeValue == "塑胶原料" ||
            this.typeValue == "改性塑料" ||
            this.typeValue == "再生塑料")
        ) {
          this.pageNo += 1;
          this.brandList(true);
        } else if (
          index == 1 &&
          this.companyPageNo * this.pageSize < this.companytotal
        ) {
          this.companyPageNo += 1;
          this.companyList(true);
        } else if (index == 2 && this.markNo * this.pageSize < this.marktotal) {
          this.markNo += 1;
          this.markList(true);
        }
      }
    },

    // 点击显示选择框
    searchInfomation(item, index) {
      if (this.typeValue == "") {
        this.$message.error("请先选择供应分类");
        return;
      } else if (this.brandValue == "" && index == 1) {
        this.$message.error("请先选择品名");
        return;
      } else if (this.companyValue == "" && index == 2) {
        this.$message.error("请先选择厂家");
        return;
      }

      // for (let i = 0; i < this.selectList.length; i++) {
      //   this.selectList[i].showArea = false;
      // }
      // item.showArea = true;
    },

    // 搜索
    getSearchContent(e, index) {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }

      this.timeout = setTimeout(() => {
        // this.selectList[index].list = [];
        if (
          index == 0 &&
          (this.typeValue == "塑胶原料" ||
            this.typeValue == "改性塑料" ||
            this.typeValue == "再生塑料")
        ) {
          // 品名搜索
          this.brandSearch = e.srcElement.value;
          this.pageNo = 1;
          this.brandList(false);
        } else if (index == 1) {
          //厂家搜索
          this.companySearch = e.srcElement.value;
          this.companyPageNo = 1;
          this.companyList(false);
        } else if (index == 2) {
          //牌号搜索
          this.markSearch = e.srcElement.value;
          this.markNo = 1;
          this.markList(false);
        } else if (index == 0 && this.typeValue == "塑料助剂") {
          this.SearchSLZJ(e);
        } else if (index == 0 && this.typeValue == "塑料机械") {
          this.SearchSLJX(e);
        }
      }, 500);
    },

    // 塑料制剂搜索
    SearchSLZJ(e) {
      let slzjList = [];
      if (e.srcElement.value == "") {
        // this.actions = this.actionsSearch;
        this.selectList[0].list = this.selectList[0].option;
      } else {
        for (let item of this.selectList[0].option) {
          if (item.name.indexOf(e.srcElement.value.toUpperCase()) !== -1) {
            slzjList.push(item);
          }
        }
        this.selectList[0].list = slzjList;
      }
    },

    // 塑料机械搜索
    SearchSLJX(e) {
      let sljxList = [];
      if (e.srcElement.value == "") {
        // this.actions = this.actionsSearch;
        this.selectList[0].list = this.selectList[0].actions;
      } else {
        for (let item of this.selectList[0].actions) {
          if (item.name.indexOf(e.srcElement.value.toUpperCase()) !== -1) {
            sljxList.push(item);
          }
        }
        this.selectList[0].list = sljxList;
      }
    },

    // 选择供应分类
    selectKind(index) {
      this.isRed = false;
      this.currentIndex = index;
      this.typeValue = this.kindList[this.currentIndex].name;
      this.brandSearch = this.companySearch = this.markSearch = "";
      this.pageNo = this.companyPageNo = this.markNo = 1;

      if (
        this.typeValue == "塑胶原料" ||
        this.typeValue == "改性塑料" ||
        this.typeValue == "再生塑料"
      ) {
        this.brandList(false);
      } else if (this.typeValue == "塑料助剂") {
        this.selectList[0].list = this.selectList[0].option;
      } else if (this.typeValue == "塑料机械") {
        this.selectList[0].list = this.selectList[0].actions;
      }

      this.brandValue = this.companyValue = this.markValue = "";
      this.selectList[0].showArea = true;
      this.selectList[1].showArea = this.selectList[2].showArea = false;
      if (this.currentIndex == 0) {
        this.hideCompanySelect = false;
      } else {
        this.hideCompanySelect = true;
      }
    },

    saveData(item1, item2, index) {
      if (this.typeValue == "") {
        this.$message.error("请先选择供应分类");
      } else if (index == 0) {
        this.brandValue = item2.name;
        this.brandId = item2.id;
        this.selectList[1].showArea = true;
        this.selectList[2].showArea = false;
        this.selectList[1].list = [];

        this.companyPageNo = 1;
        this.companyList(false);

        this.markNo = 1;
        this.companyValue = this.markValue = "";
        this.isRed = false;
      } else if (index == 1) {
        this.companyValue = item2.name;
        this.companyId = item2.id;
        this.selectList[2].showArea = true;
        this.selectList[2].list = [];

        this.markNo = 1;
        this.markList(false);
        this.markValue = "";
        this.isRed = false;
      } else {
        this.markValue = item2.name;
        this.markId = item2.id;
      }
      item1.showArea = true;

      if (this.typeValue == "塑胶原料" && this.markValue !== "") {
        this.isRed = true;
      } else if (this.typeValue !== "塑胶原料" && this.brandValue !== "") {
        this.isRed = true;
      }
    },

    // 清除
    clearAll() {
      this.isRed = false;
      this.test = [];
      this.selectList[1].showArea = false;
      this.selectList[2].showArea = false;

      this.currentIndex = -1;
      this.typeValue =
        this.brandValue =
        this.companyValue =
        this.markValue =
          "";

      this.brandSearch = this.companySearch = this.markSearch = "";
      this.pageNo = 1;
      this.brandList(false);
      // for (let i = 0; i < this.selectList.length; i++) {
      //   this.selectList[i].showArea = false;
      // }
    },

    // 地址列表
    async getAddressList() {
      let res = await this.$apiFun.getAddressList();
      // console.log("supplymainres",res);
      this.addressData = res.result.rows;
    },

    nextPage() {
      if (this.typeValue == "") {
        this.$message.error("请选择供应分类");
      } else if (this.brandValue == "") {
        this.$message.error("请选择品名");
      } else if (this.typeValue == "塑胶原料" && this.companyValue == "") {
        this.$message.error("请选择厂家");
      } else if (this.typeValue == "塑胶原料" && this.markValue == "") {
        this.$message.error("请选择牌名");
      } else {
        // let mainAddress = JSON.parse(sessionStorage.getItem("InfoAddress"));
        this.defaultAddress = this.addressData[0];

        this.$emit("Topage", {
          typeValue: this.typeValue,
          brandValue: this.brandValue,
          brandId: this.brandId,
          companyValue: this.companyValue,
          companyId: this.companyId,
          markValue: this.markValue,
          markId: this.markId,
          defaultProvince: this.defaultAddress?.supplierInformationProvince,
          defaultCity: this.defaultAddress?.supplierInformationCity,
          defaultAbbreviation: this.defaultAddress?.abbreviation,
        });
      }
    },

    showNoticeLog() {
      this.showNotice = true;
    },

    hideNoticeLog() {
      this.showNotice = false;
    },
  },
  deactivated() {
    this.currentIndex = 0;
    // this.pageNo =this.companyPageNo = this.markNo =1;
    // this.brandList(false)
  },
};
</script>

<style lang="less" scoped>
ul::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 20px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
ul::-webkit-scrollbar-track {
  /* 滚动槽 */
  // -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
  border-radius: 10px;
  background: #efefef;
}
ul::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(167, 203, 244, 1);
  background: #cccccc;
}

.supplyMain {
  width: 100%;
  height: auto;

  // 顶部
  .nav {
    background: #ffffff;
    box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
    border-radius: 10px;
    padding: 0.3rem 0.5rem;
    text-align: left;
    margin-bottom: 0.2rem;
    .title {
      font-size: 0.24rem;
      font-weight: bold;
      color: #333333;
      line-height: 0.3rem;
      margin-bottom: 0.2rem;
    }
    .subheading {
      display: flex;
      align-items: center;
      .notice {
        width: 60%;
        font-size: 0.18rem;
        font-weight: 400;
        color: #999999;
        span {
          color: #3756df;
          cursor: pointer;
        }
      }

      .connect {
        width: 40%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .left {
          width: 90%;
          height: 0.5rem;
          line-height: 0.5rem;
          .goConnect {
            width: 100%;
            height: 100%;
            background: url("../../assets/bussiness/bg_fbgy@2x.png") no-repeat;
            background-size: 100% auto;
            font-size: 0.18rem;
            text-align: center;
            font-weight: 400;
            color: #ffffff;
          }
        }
        .ask {
          width: 0.26rem;
          height: 0.26rem;
          .image {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
    }
  }

  // 内容
  .content {
    background: #ffffff;
    box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
    border-radius: 10px;
    padding: 0.3rem 0.5rem;
    .top {
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-direction: column;
      .title {
        font-size: 0.2rem;
        color: #333333;
      }
      .topSelect {
        display: flex;
        margin-top: 0.25rem;
        .selectGroup {
          width: 6.5rem;
          height: 0.26rem;
          display: flex;
          justify-content: space-between;
          .selectItem1 {
            width: 16%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.18rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            cursor: pointer;
            .checkbox {
              width: 0.2rem;
              height: 0.2rem;
              border: 1px solid #999999;
            }
            .checkImage {
              width: 0.22rem;
              height: 0.22rem;
            }
          }
        }
      }
    }

    // 搜索
    .search {
      margin-top: 0.3rem;
      display: flex;
      justify-content: space-between;
      .SelectItem {
        width: 32%;
        height: auto;
        .input {
          width: 86%;
          height: 0.2rem;
          background: #ffffff;
          border: 1px solid #333333;
          border-radius: 5px;
          font-size: 0.18rem;
          font-weight: 400;
          color: #999999;
          padding: 0.1rem 0.2rem;
          display: block;
        }
        .dropDown {
          width: 100%;
          margin-top: 0.1rem;
          height: 2.3rem;
          border-radius: 5px;
          text-align: left;
          .viewArea {
            width: 86%;
            height: 100%;
            padding: 0.1rem 0.2rem;
            box-shadow: 2px 2px 10px 0px #cccccc;

            .tip {
              font-size: 0.18rem;
              font-weight: bold;
              color: #333333;
              text-indent: 0.06rem;
            }
            .selectList {
              width: 100%;
              list-style: none;
              max-height: 2rem;
              overflow: auto;
              padding-inline-start: 0;
              margin-block-start: 0;
              margin-block-end: 0;
              .item {
                width: 98%;
                height: 0.4rem;
                background: #fff;
                border-radius: 5px;
                font-size: 0.18rem;
                line-height: 0.4rem;
                font-weight: 400;
                color: #333333;
                text-indent: 0.1rem;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;

                &:hover {
                  background: #f42551;
                  font-weight: bold;
                  color: #ffffff;
                }
              }
            }
          }
        }
      }
    }

    //已选分类
    .selected {
      margin-top: 0.38rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        span {
          font-size: 0.18rem;
          font-weight: 400;
          color: #333333;
        }
        .box {
          text-align: left;
          width: auto;
          min-width: 3.8rem;
          height: 0.4rem;
          background: #ffffff;
          border: 1px solid #333333;
          border-radius: 5px;
          line-height: 0.4rem;
          padding: 0 0.12rem;
          font-size: 0.18rem;
        }
      }
      .right {
        font-size: 0.18rem;
        font-weight: 400;
        text-decoration: underline;
        color: #3756df;
        cursor: pointer;
      }
    }

    // 按钮
    .button {
      width: 2.3rem;
      height: 0.4rem;
      // background: #ffffff;
      border: 1px solid #333333;
      border-radius: 5px;
      font-size: 0.16rem;
      font-weight: bold;
      color: #333333;
      line-height: 0.4rem;
      margin: 0.8rem auto 0;
      cursor: pointer;
      // &:hover {
      //   font-weight: bold;
      //   color: #ffffff;
      //   background: #f42551;
      //   border: 1px solid transparent;
      // }
    }
    .isReadyClass {
      font-weight: bold;
      color: #ffffff;
      background: #f42551;
      border: 1px solid transparent;
    }
  }

  .notice_dialog {
    /deep/.el-dialog {
      margin-top: 2rem !important;
      border-radius: 10px;
      .el-dialog__header {
        border-radius: 10px 10px 0px 0px;
        background: #efefef;
        display: flex;
        justify-content: space-between;
        .el-dialog__title {
          font-size: 0.2rem;
          font-weight: bold;
          color: #333333;
        }
      }
      .el-dialog__body {
        .matter {
          font-size: 0.2rem;
          font-weight: 400;
          color: #333333;
          p{
            img{
              max-width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
